{template '../header'}
{template '../left'}

<script src="/plugins/jquery.preview.js" type="text/javascript"></script>

<div class="card">
    <div class="card-header">
        参数配置
    </div>
    <div class="card-body">
        <script type="text/javascript">
            function vali(obj) {
                if (obj.validity.patternMismatch === true) {
                    obj.setCustomValidity($(obj).prop('title'));
                } else {
                    obj.setCustomValidity('');
                }
            }
        </script>
        
        <form method="post">
            <table class="table table-sm table-striped table-hover">
                <thead>
                <th>
                    参数项
                </th>
                <th>
                    描述
                </th>
                <th>
                    值
                </th>
                </thead>
                <tbody>
                {loop $rows $row}
                <tr>
                    <td>
                        {$row['name']}
                    </td>
                    <td>
                        {$row['title']}
                    </td>
                    <td>
                        {if $row['type'] == 'string'}
                        <input class="form-control form-control-sm" type="text"
                            pattern="{$row['pattern']}"
                            id="{$row['name']}"
                            name="{$row['name']}"
                            value="{$row['value']}"
                            placeholder="{$row['error']}"
                            title="{$row['error']}" {if $row['error']}oninput="vali(this);"{/if} />
                        {/if}
                        
                        {if $row['type'] == 'image'}
                        <label id="preview_{$row['name']}" class="preview avatar">
                            +
                            <input type="file" id="thumb_{$row['name']}" />
                            <input type="hidden" id="image_{$row['name']}" name="{$row['name']}" value="{$row['value']}" />
                        </label>
                        <script type="text/javascript">
                            var loading;
                            $("#thumb_{$row['name']}").uploadImagePreview({
                                destID: "preview_{$row['name']}",
                                imgUrl: "{$row['value']}",
                                server: "/admin/upload/base64",
                                change: function(image) {
                                    $("#image_{$row['name']}").val(image);
                                },
                                startUpload: function () {
                                    loading = $.loading({title: '正在上传...'});
                                },
                                finishUpload: function () {
                                    loading.unloading();
                                },
                            });
                        </script>
                        {/if}
                    </td>
                </tr>
                {/loop}
                </tbody>
            </table>
            <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> 保存</button>
        </form>
    </div>
</div>
{template '../footer'}